<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(128,255,255);
        }
        .box{
            width: 900px;
            margin:100px auto;
            background-color: white;
            border-radius: 30px;
        }
        .itemBox {
            width: 30%;
            margin-left: 2.5%;
            text-align: center;
            >span{
                font-size: 24px;
                font-weight: bolder;

            }

            img{
                border: 1px solid rgb(128,255,255);
                width: 100%;
                height: 230px;
            }
        }
        .title{
            display: flex;
            margin: 20px;
            >span{
                font-size: 22px;
                color: gray;
            }
        }
        .bodyBox{
            display: flex;
            flex-wrap: wrap;
        }
        .itemBox a{
            text-decoration: none;
            font-size: 16px;
            color: blue;
        }
        .itemBox a:after{
            text-decoration: none;
            font-size: 16px;
            color: blue;
        }
    </style>
</head>
<body>
<script>
    var msg=${msg};
    if (msg==1){
        alert("投票成功！");
    }else {
        alert("投票失败！")
    }
</script>
<div class="box">
    <div class="title">
        <span>活动名称：</span>
        <span>喜爱歌手</span>
        <form action="" method="post">
            姓名:<input type="text" name="singerName">
            性别:<select name="sex">
                      <option></option>
                      <option>男</option>
                      <option>女</option>
                </select>
            票数:从<input type="text" style="width: 30px" name="piaoshu1"/>
            到
            <input type="text" style="width: 30px" name="piaoshu2"/>
            <input type="submit" value="投票"/>
        </form>
    </div>
    <div class="bodyBox">
    <c:forEach items="${sList}" var="singer">

        <div class="itemBox">${singer.singerId}
            <span>${singer.singerName}</span>
            <img src="${singer.img}" alt="">
            <div>
                <span>${singer.piaoShu}票</span>
                <a href="javascript:void(0)" onclick="toupiao('${singer.singerName}','${singer.singerId}');">点击投票</a>
            </div>
        </div>
    </c:forEach>

    </div>
</div>
<script>
    function toupiao(singername,singerid) {
        var flag = confirm("确定给"+singername+"投票吗？");
        if (flag==true){
            window.location.href="singer?type=toupaio&sId="+singerid;
        }
    }
</script>
</body>
</html>